<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>内容管理中心-首页配置</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link href="/lobsteruiframe/layuiadmin/layui/css/layui.css" rel="stylesheet" />
    <link href="/lobsteruiframe/layuiadmin/style/admin.css" rel="stylesheet" />
    <script src="/lobsteruiframe/layuiadmin/layui/layui.js"></script>
    <script src="/jslib/jquery-3.4.1.min.js"></script>
    <script src="/jslib/lobster.js"></script>

</head>

<body>
    <div class="layui-fluid box">
        <form class="layui-form" lay-filter="indexsetting" id="indexsetting">
            <div class="layui-card">
                <div class="layui-card-body box"> 
                    <div class="layui-row">
                        <div class="layui-col-xs6">
                            <div class="layui-form-item">
                                <label class="layui-form-label"><i style="color:red;">*&ensp; </i>标题</label>
                                <div class="layui-input-block">
                                    <input type="text" class="layui-input" lay-verify="required" id="Title" name="Title"
                                        placeholder="请输入标题" />
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-xs6">
                            <div class="layui-form-item">
                                <label class="layui-form-label"><i style="color:red;">*&ensp; </i>英文标题</label>
                                <div class="layui-input-block">
                                    <input type="text" class="layui-input" lay-verify="required" id="Title_en"
                                        name="Title_en" placeholder="请输入英文标题" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-row">
                        <div class="layui-col-xs12">
                            <div class="layui-form-item">
                                <label class="layui-form-label">描述</label>
                                <div class="layui-input-block">
                                    <textarea placeholder="请输入描述" class="layui-textarea" id="Desc"
                                        name="Desc"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-row">
                        <div class="layui-col-xs6">
                            <div class="layui-form-item">
                                <label class="layui-form-label">布局方式</label>
                                <div class="layui-input-block">
                                    <select name="Layout"></select>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-xs6">
                            <div class="layui-form-item">
                                <label class="layui-form-label">总宽度</label>
                                <div class="layui-input-block">
                                    <select name="TotalWidth">
                                        <option>1</option>
                                        <option>2</option>
                                        <option>3</option>
                                        <option>4</option>
                                        <option>5</option>
                                        <option>6</option>
                                        <option>7</option>
                                        <option>8</option>
                                        <option>9</option>
                                        <option>10</option>
                                        <option>11</option>
                                        <option selected>12</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-row">
                        <div class="layui-col-xs6">
                            <div class="layui-form-item">
                                <label class="layui-form-label">文本宽度</label>
                                <div class="layui-input-block">
                                    <select name="TextWidth">
                                        <option>1</option>
                                        <option>2</option>
                                        <option>3</option>
                                        <option selected>4</option>
                                        <option>5</option>
                                        <option>6</option>
                                        <option>7</option>
                                        <option>8</option>
                                        <option>9</option>
                                        <option>10</option>
                                        <option>11</option>
                                        <option>12</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-xs6">
                            <div class="layui-form-item">
                                <label class="layui-form-label"><i style="color:red;">*&ensp; </i>背景色</label>
                                <div class="layui-input-block" style="display: flex;">
                                    <input style="flex:1;" type="text" value="#49acff" placeholder="请选择文本颜色"
                                        class="layui-input" name="TextBackgroundColor">
                                    <div id="TextBackgroundColor" style="margin-right:0;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-row">
                        <div class="layui-col-xs6">
                            <div class="layui-form-item">
                                <label class="layui-form-label">链接类型</label>
                                <div class="layui-input-block">
                                    <select name="UrlType" lay-filter="UrlType"></select>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-xs6" id="Url">
                            <div class="layui-form-item">
                                <label class="layui-form-label">链接地址</label>
                                <div class="layui-input-block">
                                    <input type="text" class="layui-input" lay-verify="required" id="Url" name="Url"
                                        placeholder="请输入链接地址" />
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-xs6" id="UrlParamValue">
                            <div class="layui-form-item">
                                <label class="layui-form-label">链接参数</label>
                                <div class="layui-input-block">
                                    <select name="UrlParamValue"></select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-row">
                        <div class="layui-col-xs6">
                            <div class="layui-form-item">
                                <label class="layui-form-label">排序</label>
                                <div class="layui-input-block">
                                    <input type="text" class="layui-input"   id="Sort" name="Sort"  value="0"/>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="layui-row">
                        <div class="layui-col-xs12">
                            <div class="layui-form-item">
                                <label class="layui-form-label"><i style="color:red;">*&ensp; </i>背景图</label>
                                <div class="layui-input-block">
                                    <input type="hidden" id="BackImage" name="BackImage" value="">
                                    <div class="layui-upload">
                                        <div class="layui-inline">
                                            <button type="button" class="layui-btn" id="btnUpload">选择图片</button><input
                                                class="layui-upload-file" type="file" accept="" name="file">
                                            <i style="color:#999;">图片大小不超过1M</i>
                                        </div>
                                        <div class="layui-upload-list">
                                            <img class="layui-upload-img" name="imgUpload" id="imgUpload"
                                                style="width:90px; height:90px" src="../image/service.jpg">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="layui-form-item layui-hide">
                        <input type="button" lay-submit lay-filter="btnSubmit" id="btnSubmit" value="确认">
                    </div>
                    <input type="hidden" name="Id"/>
                    <input type="hidden" name="WebSiteId" />
                    <input type="hidden" name="DelFlag" value="0" />
                </div>
            </div>
            <div class="layui-form-item layui-hide">
                <input type="button" lay-submit lay-filter="LAY-website-front-submit" id="LAY-website-front-submit"
                    value="保存">
                <input type="button" lay-cancel lay-filter="LAY-app-website-cancel" id="LAY-website-front-cancel"
                    value="取消">
                <input type="reset" id="LAY-website-form-reset" value="重置">
            </div>
        </form>
        <blockquote class="layui-elem-quote" style="margin-top: 30px;">
            宽度1代表8.33333333%;宽度2代表16.66666667%;宽度3代表25%;宽度4代表 33.33333333%;宽度5代表41.66666667%;宽度6代表50%;
            宽度7代表58.33333333%;宽度8代表66.66666667%;宽度9代表75%;宽度10代表83.33333333%;宽度11代表91.66666667%;宽度12代表100%;
        </blockquote>
    </div>
</body>

</html>
<script>
    lobsterlayui.main(['index', 'layer', 'form', 'element', 'table', "upload", 'colorpicker'],{
            data: {
                $layui: null,
                layoutlist: [],
                urltypelist: [],
                model: {},
                contextlist: [],
                nodelist: [],
            },
            pageload: function (right) {
                var self = this;
                self.data.layoutlist = parent.layoutlist;
                self.data.urltypelist = parent.urltypelist;
                self.data.model = parent.model;
                Promise.all([self.getcontextlistbywebsiteId(), self.getnodelistbywebsiteId()]).then(res => {
                    self.data.contextlist = res[0].data;
                    self.data.nodelist = res[1].data;
                    self.setselect(self.data.layoutlist, $("[name='Layout']"));
                    self.setselect(self.data.urltypelist, $("[name='UrlType']"));
                    self.seturl("init");
                    layui.form.render('select');
                    if (self.data.model.Id > 0) {
                        layui.form.val('indexsetting', JSON.parse(JSON.stringify(self.data.model)));
                        $("#imgUpload").attr("src", self.data.model.BackImage);
                    }
                    $("[name='WebSiteId']").val(self.data.model.WebSiteId);
                })
                self.pageEvent();
            },
            setselect: function (list, _this) {
                var appendHtml = '';
                list.forEach((x, index) => {
                    appendHtml += '<option  value="' + x.Code + '">' + x.Name + '</option>'
                })
                _this.html(appendHtml);
            },
            setcid: function (list, _this) {
                var appendHtml = '';
                list.forEach((x, index) => {
                    if (index == 0)
                        appendHtml += '<option  value="' + x.CID + '" selected>' + x.Title + '</option>'
                    else
                        appendHtml += '<option  value="' + x.CID + '">' + x.Title + '</option>'
                })
                _this.html(appendHtml);
            },
            setnid: function (list, _this) {
                var appendHtml = '';
                list.forEach((x, index) => {
                    if (index == 0)
                        appendHtml += '<option  value="' + x.NID + '" selected>' + x.NodeName + '</option>'
                    else
                        appendHtml += '<option  value="' + x.NID + '">' + x.NodeName + '</option>'
                })
                _this.html(appendHtml);
            },
            seturl: function (op) {
                var self = this;
                var UrlType = op == "init" ? (self.data.model.UrlType || "1") : $("[name='UrlType']").val();
                if (UrlType == 3) {
                    $("#Url").show();
                    $("#UrlParamValue").hide();
                } else {
                    $("#Url").hide();
                    $("#UrlParamValue").show();
                    if (UrlType == 1) {
                        self.setnid(self.data.nodelist, $("[name='UrlParamValue']"));
                    } else if (UrlType == 2) {
                        self.setcid(self.data.contextlist, $("[name='UrlParamValue']"));
                    }
                    layui.form.render("select");
                }
            },
            pageEvent: function () {
                var self = this;
                layui.form.on('select(UrlType)', function (data) {
                    self.seturl();
                });
                layui.upload.render({
                    elem: "#btnUpload",
                    size: 1024,
                    url: "/basic/v1/OSS/UploadFile",
                    data: {
                    },
                    done: function (res) {
                        if (res.code == 0) {
                            $('#imgUpload').attr("src", res.data.url); //图片链接（base64）
                            $("#BackImage").val(res.data.url);
                        }
                    }
                });
                //表单赋值
                layui.colorpicker.render({
                    elem: '#TextBackgroundColor'
                    , color: self.data.model.TextBackgroundColor || "#49acff"
                    , done: function (color) {
                        $("[name='TextBackgroundColor']").val(color);
                    }
                });
                parent.getResult = function () {
                    var select = this;
                    self.data.model = layui.form.val("indexsetting");
                    if (!self.data.model.Title) {
                        layer.msg("标题不能为空");
                        return;
                    }
                    if (!self.data.model.Title_en) {
                        layer.msg("英文标题不能为空");
                        return;
                    }
                    if (!self.data.model.TextBackgroundColor) {
                        layer.msg("请设置文本背景色");
                        return;
                    }
                    if (!self.data.model.BackImage) {
                        layer.msg("请上传背景图");
                        return;
                    }
                    return self.data.model;
                }
            },
            //获取站点文章
            getcontextlistbywebsiteId: function () {
                var self = this;
                return new Promise((resolve, reject) => {
                    lobsterlayui.GETAPI('tsAdmin.getcontextlistbywebsiteId',{websiteId: self.data.model.WebSiteId}).then(retdata=>{
                        resolve(retdata);
                    }).catch(res=>{
                        reject(res);
                    })
                });
            },
            getnodelistbywebsiteId: function () {
                var self = this;
                return new Promise((resolve, reject) => {
                    lobsterlayui.GETAPI('tsAdmin.getnodelistbywebsiteId',{websiteId: self.data.model.WebSiteId}).then(retdata=>{
                        resolve(retdata);
                    }).catch(res=>{
                        reject(res);
                    })
                });
            }

    })

</script>